@import "/old/css/css/bonus/common";

.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  &.show {
    display: block;
  }
  .page-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    .header {
      width: 100%;
      min-height: rem(354.5px);
      position: relative;
      &:after{
        content: '';
        display: block;
        width: rem(130px);
        height: rem(70px);
        position: absolute;
        top: 0;
        right: rem(30px);
        background: url(https://images.simpletour.com/activity/bonus/jt_logo@3x.png) no-repeat center;
        background-size: contain;
      }
    }
    .content {
      padding: 0 0 rem(34px);
      position: relative;
      margin-top: rem(-20px);
      .red_packet {
        margin-bottom: rem(24px);
        img {
          min-height: rem(298px);
        }
        .receive {
          position: relative;
          display: block;
          width: rem(288px);
          height: rem(62px);
          line-height: rem(62px);
          margin: rem(-62px) auto 0;
          font-size: rem(32px);
          color: #a01114;
          text-align: center;
          background-color: #ffbd1d;
          @include border-radius(8px);
          @include shadow(5px, 5px, 5px, rgba(0, 0, 0, 0.2));
        }
      }
      .pad {
        padding: 0 rem(48px);
        text-align: center;
        &.has_countdown{
          margin-top: rem(-40px);
        }
      }
      .gameOver,.presell {
        background-color: #610406;
        color: #fff;
        font-size: rem(24px);
        line-height: rem(34px);
        padding: rem(26px);
        text-align: center;
        margin-bottom: rem(20px);
        margin-top: rem(20px);
        @include border-radius(8px);
        .info {
          padding-bottom: rem(12px);
        }
        a {
          display: inline-block;
          height: rem(52px);
          line-height: rem(52px);
          padding: 0 rem(42px);
          color: #fff;
          background-color: #c39666;
          @include border-radius(8px);
        }
      }
      .presell .info{
        font-size: rem(28px);
        line-height: rem(34px);
        padding-bottom: rem(16px);
        span{
          font-size: rem(32px);
        }
      }
      .countdown{
        width: 100%;
        position: relative;
        text-align: center;
        img{
          width: 100%;
          min-height: rem(271.32px);
        }
        .time-group{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .t-title{
            color: #fff;
            font-size: rem(28px);
            font-weight: 600;
            padding: rem(20px) rem(48px) rem(26px);
          }
          .t-content{
            color: #fff;
            font-size: rem(68px);
            padding: 0 rem(110px);
            @include displayflex;
            @include flexflowRow();
            .t-block{
              @include flex;
              margin-left: rem(26px);
              margin-right: rem(26px);
              label{
                min-width: rem(86px);
                height: rem(86px);
                line-height: rem(86px);
                text-align: center;
                background-color: #ebc59d;
                display: block;
                color: #a01114;
                font-size: rem(40px);
                margin-bottom: rem(14px);
                @include border-radius(8px);
              }
              span{
                display: block;
                color: #fff;
                font-size: rem(28px);
              }
            }
          }
        }
      }
      .trumpet {
        position: relative;
        padding: rem(14px) rem(40px) rem(14px) rem(74px);
        background-color: #fff;
        @include border-radius(8px);
        &:before {
          display: block;
          content: '';
          width: rem(28px);
          height: rem(25.8px);
          position: absolute;
          left: rem(23px);
          top: rem(17.5px);
          background: url(https://images.simpletour.com/activity/bonus/trumpet_icon@3x.png) no-repeat center;
          background-size: contain;
        }
        ul{
          height: rem(114px);
          overflow: hidden;
        }
        li {
          transition-property: margin-top;
          -moz-transition-property: margin-top;
          -webkit-transition-property: margin-top;
          -o-transition-property: margin-top;
          transition-duration: 400ms;
          -moz-transition-duration: 400ms;
          -webkit-transition-duration: 400ms;
          -o-transition-duration: 400ms;
          font-size: rem(24px);
          height: rem(38px);
          line-height: rem(38px);
          text-align:left;
          &:last-child {
            padding-bottom: 0;
          }
          &.slideup{
            margin-top: rem(-38px);
          }
        }
      }
      .tips {
        color: #fff;
        font-size: rem(24px);
        text-align: center;
        margin-bottom: rem(12px);
        margin-top: rem(20px);
      }
      form {
        padding: rem(20px) 0;
        .tip {
          color: #fff;
          font-size: rem(24px);
          text-align: center;
          margin-bottom: rem(12px);
        }
        .input-group {
          padding-bottom: rem(19px);
          @include displayflex;
          @include flexflowRow();
          input {
            display: block;
            width: rem(362px);
            height: rem(52px);
            padding: rem(12px) rem(26px);
            margin-right: rem(12px);
            border: none;
            outline: none;
            @include border-radius(8px);
          }
          span {
            display: block;
            @include flex;
            height: rem(52px);
            line-height: rem(52px);
            text-align: center;
            font-size: rem(24px);
            color: #fff;
            background-color: #c39666;
            @include border-radius(8px);
            &.getCode {
              background-color: #610406;
            }
            &.disabled {
              background-color: #888;
              color: #fff;
            }
          }
        }
      }
      .msgBox {
        padding: rem(18px) rem(26px);
        background: #fff;
        margin-bottom: rem(18px);
        @include border-radius(8px);
        p {
          font-size: rem(24px);
          color: #333;
          text-align: center;
          line-height: rem(30px);
        }
        p:first-child {
          font-size: rem(26px);
          color: #c40105;
          font-weight: bold;
          padding-bottom: rem(14px);
        }
        p:last-child {
          font-size: rem(26px);
          font-weight: bold;
          padding-top: rem(14px);
        }
      }
      .withdraw {
        display: inline-block;
        height: rem(52px);
        line-height: rem(52px);
        padding: 0 rem(22px);
        background-color: #c39666;
        color: #fff;
        font-size: rem(24px);
        margin-bottom: rem(18px);
        @include border-radius(8px);
        &.disabled {
          background-color: #888;
          color: #fff;
        }
      }
      .rule {
        padding: rem(20px) rem(30px) rem(30px);
        font-size: rem(24px);
        color: #fff;
        background-color: #610406;
        text-align: left;
        @include border-radius(8px);
        .rule-title {
          @include displayflex;
          @include flexflowRow();
          -webkit-box-align: start;
          -ms-flex-align: start;
          -webkit-align-items: flex-start;
          align-items: flex-start;
          padding-bottom: rem(18px);
          .line {
            @include flex;
            margin-top: rem(14px);
            border-bottom: rem(2px) solid #fff;
          }
          .title {
            font-size: rem(28px);
            font-weight: bold;
            margin: 0 rem(12px);
          }
        }
        .rule-content {
          line-height: rem(40px);
          font-size: rem(24px);
          position: relative;
        }
      }
    }
    .footer {
      padding-bottom: rem(117px);
      a {
        display: block;
        margin: 0 auto;
        width: rem(296px);
        height: rem(76px);
        line-height: rem(76px);
        color: #fff;
        font-size: rem(28px);
        font-weight: bold;
        text-align: center;
        background-color: #f79618;
        position: relative;
        @include border-radius(8px);
        &:before {
          content: '';
          display: block;
          position: absolute;
          width: rem(39px);
          height: rem(41px);
          background: url(https://images.simpletour.com/activity/bonus/pepper_icon@3x.png) no-repeat center;
          background-size: contain;
          top: rem(17.5px);
          left: rem(9px);
        }
        &:after {
          content: '';
          display: block;
          position: absolute;
          width: rem(39px);
          height: rem(41px);
          background: url(https://images.simpletour.com/activity/bonus/pepper_icon@3x.png) no-repeat center;
          background-size: contain;
          top: rem(17.5px);
          right: rem(9px);
        }
      }
    }
  }
}
.modal-wrap {
  width: 100%;
  height: 100%;
  display: none;
  .modal-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1000;
  }
  .modal-dialog{
    width: rem(422px);
    background-color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: rem(-211px);
    z-index: 1010;
    text-align: center;
    overflow: hidden;
    @include border-radius(8px);
    .dialog-header{
      color: #a11014;
      font-size: rem(28px);
      padding: rem(20px) rem(24px) 0;
    }
    .dialog-content{
      padding: rem(20px) rem(26px) rem(26px);
      font-size: rem(24px);
      color: #333;
      line-height: rem(32px);
    }
    .dialog-footer{
      @include displayflex;
      @include flexflowRow();
      a{
        display: block;
        @include flex;
        height: rem(60px);
        color: #fff;
        background-color: #c39666;
        font-size: rem(28px);
        line-height: rem(60px);
      }
      a:nth-child(2) {
        border-left: rem(2px) solid #a11014;
      }
    }
  }
}

